<template>
  <div class="checkbox-group-wrapper">
    <el-checkbox
      class="sync-checkbox"
      :disabled="serviceType.isSaleEdit"
      v-for="(item, index) in syncDataList"
      :class="{
        'no-margin': index === syncDataList.length - 1
      }"
      :label="item"
      :key="item.name"
      v-model="item.checked"
      @change="handleSyncCheckChange">{{item.name}}</el-checkbox>
    <custom-add-item
      v-if="customState"
      v-model="customGroupValue"
      :isEdit="serviceType.isEditor"
      :span="12"
      :simple-layout="true"
      :formType="formType"
      :fixedData="syncDataList"
      :max-item="MAX_CUSTOM_GROUP_NUM"
      :editState="!serviceType.isSaleEdit"
      :maxlength="MAX_CUSTOM_NAME_NUM"
      @change="handleCustomAddChange"/>
  </div>
</template>
<script>
  import CustomAddItem from './CustomAddItem'

  import { cloneObj } from 'utils'

  import { mapGetters } from 'vuex'
  import serviceApi from 'api/service'
  import {
    FORM_TYPE_ENUMS,
    DATA_TYPE_ENUMS,
    MAX_CUSTOM_NAME_NUM,
    MAX_CUSTOM_GROUP_NUM,
    TRAIN_SALE_ITEM
  } from '../constant'
  export default {
    components: {
      CustomAddItem
    },
    props: {
      value: Array,
      data: Object,
      index: Number,
      min: Number
    },
    computed: {
      ...mapGetters({
        'serviceType': 'service_release_type' // 类目类型 区分 赛事 培训 票务等
      }),
      formType () {
        /**
         * 默认为文本框，另外两种是时间和多文本框
         */
        let showModel = this.data ? this.data.showModel : FORM_TYPE_ENUMS.INPUT
        switch (showModel) {
          case FORM_TYPE_ENUMS.INPUTS: break
          case FORM_TYPE_ENUMS.INPUT: break
          case FORM_TYPE_ENUMS.TIME: break
          default:
            showModel = FORM_TYPE_ENUMS.INPUT
        }
        return showModel
      }
    },
    created () {
      if (this.data.attrCode === TRAIN_SALE_ITEM.attrCode) {
        this.MAX_CUSTOM_GROUP_NUM = 20 // 次课自定义组别 为20
      }
      // 编辑状态下  如果不是跑步 则禁用修改
      this.initData() // 初始化组别数据
      // this.changeCheckedData()
    },
    beforeDestroy () {
      // 切换次课重新渲染表格
      if (this.data.attrCode === TRAIN_SALE_ITEM.attrCode) {
        this.$emit('change', {
          type: 'destroy',
          index: this.index // 组别index
        })
      }
    },
    data () {
      return {
        syncDataList: [], // 数据库已有组别属性
        customGroupValue: [], // 自定义组别属性
        isShowTips: !1, // 培训 没有校区时特殊处理
        tips: `暂无${this.data.attrName}，请先设置`, // 培训 没有校区时特殊处理
        isFirst: !0, // 是否第一次加载
        customState: !0, // 是否可自定义
        // FORM_TYPE_ENUMS: FORM_TYPE_ENUMS, // 表单类型
        MAX_CUSTOM_NAME_NUM: MAX_CUSTOM_NAME_NUM, // 文本输入框字符长度限制
        MAX_CUSTOM_GROUP_NUM: MAX_CUSTOM_GROUP_NUM // 自定义组别个数
      }
    },
    methods: {
      initData () {
        /**
         * 数据类型 1-url 2-text 3-json
         * 1、一般为下拉框需要通过url获取数据
         * 2、一般为文本框
         * 3、一般为多选框
         */
        let type = this.data.dataType - 0
        let attrValue = this.data.attrValue
        let jsonData = {}
        switch (type) {
          case DATA_TYPE_ENUMS.URL:
            jsonData = JSON.parse(attrValue)
            this.getItemData(jsonData)
            break
          case DATA_TYPE_ENUMS.TEXT:
            this.setItemData({data: []})
            break
          case DATA_TYPE_ENUMS.JSON:
            jsonData = JSON.parse(attrValue)
            this.setItemData(jsonData)
            break
          default:
            this.syncDataList = attrValue
        }
      },
      getItemData (config) {
        serviceApi.dict(config.url).then(({data}) => {
          // 请求完成 启用编辑模式
          // this.editorState = !0
          config.data = data
          this.setItemData(config)
        })
      },
      setItemData ({data = [], text, value, custom}) {
        this.customState = custom === 0 || custom === '0' ? !1 : !0 // custom为0 表示不允许自定义组别
        if (!data.length) {
          // 不能自定义的 无数据的提示
          if (!this.customState) {
            this.isShowTips = !0
          }
          // 培训特殊提示
          if (this.serviceType.isTrain) {
            this.$message({
              message: '发布培训课程需先设置校区，请去校区列表添加',
              type: 'warning'
            })
          }
        }
        let isEditor = this.serviceType.isEditor
        let {editorValues = []} = this.data
        editorValues = cloneObj(editorValues)
        let defaultArr = data.map((item, index) => {
          let delIndex = -1 // 需要删除非自定义的编辑数据 剩余的给自定义渲染
          let editItem = editorValues.find((k, kIndex) => {
            let flag = Boolean(k.attrName === item[text]) // url模式下 JSON对象的text为数据的name_key
            delIndex = flag ? kIndex : delIndex // 保存索引
            return flag
          })
          let checked = Boolean(editItem)
          if (isEditor) {
            checked && editorValues.splice(delIndex, 1) // 删除非自定义编辑数据
          } else {
            checked = index < this.min // 非编辑 默认选中定义的最小数量
          }
          editItem = editItem || {} // 空值处理
          return Object.assign({}, item, {
            custom: 0, // 非自定义
            checked: checked, // 默认不选中
            num: editItem.num,
            price: editItem.price,
            linmitNum: editItem.linmitNum,
            skuCode: `${this.data.attrCode}_${item[value]}`, // 多组别时用来获取库存数据
            name: item[text], // url模式下 JSON对象的text为数据的name_key
            value: item[value] // url模式下 JSON对象的value为数据的value_key
          })
        })
        this.syncDataList = defaultArr
        this.$exitNameList = defaultArr.map(k => k.name) // 重名数组初始化
        // 编辑情况下 需要处理 包含编辑 非编辑
        // 抽离自定义组件中已默认添加
        this.customGroupValue = !editorValues.length ? [] : editorValues.map(k => {
          return Object.assign({}, k, {
            custom: 1,
            key: this.unique(), // 唯一索引
            checked: true, // 编辑数据 即为已选中
            checkedState: true, // 默认能选中 防止编辑状态下取消选中后不能再次选中
            name: k.attrName,
            value: k.attrValue,
            // attrValue格式为T/C_次数_月数 #516
            tempVl: k.attrCode.indexOf(TRAIN_SALE_ITEM.attrCode) !== -1 ? k.attrValue.split('_').slice(1, 3) : [0, 0],
            skuCode: `${this.data.attrCode}_${k.attrValue}` // 多组别时用来获取库存数据
          })
        })
        // 触发change事件 渲染销售规格
        this.changeCheckedData()
      },
      handleSyncCheckChange () {
        // 中转事件
        // 已有属性的选中事件
        this.changeCheckedData()
      },
      changeCheckedData () {
        /**
         * 各种事件汇总 集中出发change事件 进而渲染销售规格
         */
        this.$nextTick(() => {
          // 触发选中的选项修改
          let newArr = this.syncDataList.filter(k => k.checked).concat(this.customGroupValue.filter(k => k.checked && k.name.trim()))
          this.$emit('input', newArr)
          this.$emit('change', {
            isFirst: this.isFirst,
            items: newArr,
            index: this.index // 组别index
          })
          this.isFirst = false
        })
      },
      handleCustomAddChange () {
        this.changeCheckedData()
      }
    }
  }
</script>
<style lang="scss">
  .checkbox-group-wrapper{
    .sync-checkbox{
      &.no-margin{
        margin-right: 0;
      }
    }
    .custom-group-wrapper{
      .group-item{
        margin-bottom: 6px;
        .el-checkbox{
          margin-right: 0;
        }
        .xcheckbox-item.mr40 + .el-button{
          margin-right: 40px;
        }
      }
    }
    .tips{
      text-indent: 2em;
      color: #999;
    }
  }
</style>
<style lang="scss" scoped>
  .checkbox-group-wrapper{
  }
</style>
